<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template2.xhtml">
    <ui:param name="bodyClass" value="login-body"/>

    <ui:define name="content">
        <div class="card login-panel ui-fluid">
            <div class="ui-g">
                <div class="ui-g-12">
                    <p:graphicImage value="#{resource['ultima-layout:images/logo-ultima.svg']}"/>
                </div>
                <div class="ui-g-12">
                    <span class="md-inputfield">
                        <p:inputText/>
                        <label>Username</label>
                    </span>
                </div>
                <div class="ui-g-12">
                    <span class="md-inputfield">
                        <p:password/>
                        <label>Password</label>
                    </span>
                </div>
                <div class="ui-g-12">
                    <p:button value="Sign In" outcome="/dashboard.xhtml" icon="ui-icon-person"/>
                    <p:button value="Forgot Password" outcome="/dashboard.xhtml" icon="ui-icon-help" styleClass="secondary"/>
                </div>
            </div>
        </div>

        <div class="login-footer">PrimeFaces Ultima</div>
    </ui:define>
</ui:composition>